
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			body {
				padding-left: 17px;
				background-color: #FDFBFE;
				font-size: 12px;
				font-family: tahoma, arial, "Hiragino Sans GB", "WenQuanYi Micro Hei", "微软雅黑", "宋体", sans-serif;
			}
			
			a {
				color: black;
				text-decoration: none;
			}
			.pa{
				position: absolute;
			}
			.pr{
				position: relative;
			}
			.div0 {
				width: 1000px;
				margin: 0 auto;
			}
			
			.div1 {
				height: 97px;
				margin-top: 40px;
			}
			
			.bg {
				background-image: url(img/sprite-hash-91639fdc.png);
			}
			
			.div1_01 {
				width: 313px;
				height: 53px;
				background-position: 0 0;
				float: left;
			}
			
			.div1_02 {
				width: 445px;
				height: 28px;
				margin-top: 12.5px;
				background-position: -317px 0;
				float: right;
			}
			
			.div2 {
				height: 600px;
				/*border: 1px solid black;*/
				background-image: url(img/bao.jpg);
				/*background-position: center center;
				background-repeat:no-repeat ;*/
			}
			
			.div2_01 {
				width: 300px;
				height: 404px;
				padding-top: 40px;
				padding-right: 74px;
				float: right;
				/*border: 1px solid black;*/
			}
			
			.plase {
				font-size: 14px;
				line-height: 16px;
				margin-bottom: 15px;
			}
			
			.inp {
				width: 300px;
				/*height: 244px;*/
				/*border: 1px solid black;*/
			}
			
			.inp_1 {
				width: 300px;
				height: 56px;
			}
			
			.inp_1_01 {
				background-color: white;
				box-shadow: none;
				width: 278px;
				padding: 6px 10px;
				border: 1px solid #b2b2b2;
				border-radius: 3px;
				color: #333;
				outline: none;
			}
			
			.disp {
				margin-top: 2px;
				margin-bottom: 5px;
				width: 176px;
				height: 19px;
				color: red;
				display: none;
			}
			
			.butt {
				width: 300px;
				height: 40px;
				margin-bottom: 15px;
			}
			
			.butt_1 {
				width: 140px;
				height: 40px;
				font-size: 16px;
				background-color: #f10180;
				border: 1px solid #f10180;
				color: white;
				font-size: 16px;
				border-radius: 3px;
				outline: none;
				cursor: pointer;
			}
			
			.fuxuan {
				width: 300px;
				height: 19px;
				margin-bottom: 50px;
				position: relative;
			}
			
			.duigou {
				width: 19px;
				height: 16px;
				background-image: url(img/sprite.png);
				background-position: -24px 0;
				/*border: 1px solid black;*/
				position: absolute;
				top: 0;
				display: none;
			}
			
			.dw {
				position: absolute;
				height: 16px;
				font-size: 12px;
				left: 25px;
				cursor: pointer;
			}
			
			.mm {
				font-size: 12px;
				margin: 0 3px;
			}
			
			.mm:hover {
				color: #f10180;
			}
			
			.zc {
				font-size: 12px;
				color: #f10180;
				margin: 0 3px;
			}
			
			.fr {
				float: right;
			}
			
			.fl {
				float: left;
			}
			
			.hezuo {
				width: 300px;
				height: 131px;
				position: relative;
			}
			
			.hezuo_01 {
				width: 300px;
				line-height: 24px;
				margin-bottom: 5px;
				color: #666;
			}
			
			.logo {
				width: 24px;
				height: 24px;
				margin-right: 8px;
				background-image: url(img/sprite-hash-91639fdc.png);
				position: relative;
				border-radius: 3px;
				/*border: 1px solid black;*/
			}
			
			.touming {
				width: 24px;
				height: 24px;
				background-color: rgba(255, 255, 255, 0.5);
				position: absolute;
			}
			
			.touming:hover {
				background-color: transparent;
			}
			
			.position1 {
				background-position: -291px -57px;
			}
			
			.position2 {
				background-position: -235px -57px;
			}
			
			.position3 {
				background-position: -179px -57px;
			}
			
			.position4 {
				background-position: -207px -57px;
			}
			
			.position5 {
				line-height: 24px;
				cursor: pointer;
			}
			
			.div3 {
				height: 18px;
			}
			
			.wenben {
				text-align: center;
				color: #666;
			}
			
			.open {
				width: 328px;
				height: 58px;
				/*border: 1px solid black;*/
				position: absolute;
				top: 60px;
				left: -20px;
				padding-top: 10px;
				/*line-height: 24px;*/
				display: none;
			}
			
			.xt {
				position: relative;
			}
			
			.xt:hover {
				color: #f10180;
			}
			
			.xt:hover .jt {
				border-bottom: 4px solid #f10180;
			}
			
			.xx {
				width: 74px;
				margin: 0 3px 10px 3px;
				text-align: center;
				float: left;
			}
			
			.xx a:hover {
				color: #f10180;
			}
			
			.shu {
				width: 1px;
				float: left;
			}
			
			.fuxuan_01 {
				display: inline-block;
				width: 19px;
				height: 16px;
				background-image: url(img/sprite.png);
				background-position-x: -48px;
				/*border: 1px solid black;*/
			}
			
			.jt {
				width: 0;
				height: 0;
				color: #666;
				border-top: 4px solid transparent;
				border-left: 4px solid transparent;
				border-right: 4px solid transparent;
				border-bottom: 4px solid black;
				position: absolute;
				top: 3px;
				left: 25px;
			}
			
			.False {
				background-image: url(img/false.png);
				display: none;
			}
			
			.True {
				background-image: url(img/true.png);
				display: none;
			}
			
			.IMG {
				width: 20px;
				height: 20px;
				left: 270px;
				top: 4px;
				/*border: 1px solid red;*/
			}
			
			.IMG2 {
				width: 20px;
				height: 20px;
				left: 146px;
				top: 4px;
			}
			
			.zb1 {
				background-position: -1px -1.5px;
			}
			
			.zb2 {
				background-position: -2.5px -1.5px;
			}
		</style>
	</head>

	<body>
		<div class="div0 div1">
			<div class="div1_01 bg"></div>
			<div class="div1_02 bg"></div>
		</div>
		<div class="div0 div2">
			<div class="div2_01">
				<div class="plase">
					欢迎回来！请登录
				</div>
				<div class="inp">
					<form action="" method="get" id="regFrom">
						<div class="inp_1 pr">
							<input type="text" name="phone" id="phone" value="" class="inp_1_01" placeholder="请输入用户名" />
							<span class="False IMG pa zb1"></span>
							<span class="True IMG pa zb2"></span>
							<p class="disp">请输入正确的手机号码</p>
						</div>
						<div class="inp_1 pr">
							<input type="password" name="password" id="password" value="" class="inp_1_01" placeholder="密码由6-20位字母、数字和符号组成" />
							<span class="False IMG pa zb1"></span>
							<span class="True IMG pa zb2"></span>
							<p class="disp">请输入6-20位密码</p>
						</div>
						<div class="butt">
							<input type="button" value="登录" class="butt_1" id="btnReg" disabled="disabled"/>
						</div>
						<div class="fuxuan">
							<lable for="jj" class="fuxuan_01 fl" onclick="fun1()" id="fxk"></lable>
							<span class="dw" onclick="jizhu()">记住用户名</span>
							<span class="fr"><a href="#" class="mm">忘记密码</a>|<a href="#" class="zc">免费注册</a></span>
						</div>
						<div class="hezuo">
							<p class="hezuo_01">合作网站账号登录：</p>
							<div class="hezuo_01">
								<a href="">
									<div class="logo position1 fl">
										<div class="touming"></div>
									</div>
								</a>
								<a href="">
									<div class="logo position2 fl">
										<div class="touming"></div>
									</div>
								</a>
								<a href="">
									<div class="logo position3 fl">
										<div class="touming"></div>
									</div>
								</a>
								<a href="">
									<div class="logo position4 fl">
										<div class="touming"></div>
									</div>
								</a>
								<div class="position5 fl" onclick="dianji()"><span class="xt">更多<div class="jt" id="jiantou"></div></span>
									<div class="open" id="dianji2">
										<div class="xx">
											<a href="">网 易</a>
										</div>
										<div class="shu">|</div>
										<div class="xx">
											<a href="">人人网</a>
										</div>
										<div class="shu">|</div>
										<div class="xx">
											<a href="">建行登录</a>
										</div>
										<div class="shu">|</div>
										<div class="xx">
											<a href="">财付通</a>
										</div>
										<div class="xx">
											<a href="">开心网</a>
										</div>
										<div class="shu">|</div>
										<div class="xx">
											<a href="">中国移动</a>
										</div>
										<div class="shu">|</div>
										<div class="xx">
											<a href="">翼支付</a>
										</div>
									</div>
								</div>
							</div>
						</div>
				</div>
			</div>
		</div>
		<div class="div0 div3">
			<p class="wenben">Copyright 2008-2017 vip.com，All Rights Reserved ICP证：粤 B2-20080329</p>
		</div>

		<script type="text/javascript">
			var n = 1

			function dianji() {
				n++;
				if(n % 2 == 0) {
					document.getElementById("dianji2").style.display = "block"
					document.getElementById("jiantou").style.borderBottom = "4px solid transparent"
					document.getElementById("jiantou").style.borderTop = "4px solid black"
					document.getElementById("jiantou").style.top = "7px"

				} else {
					document.getElementById("dianji2").style.display = "none"
					document.getElementById("jiantou").style.borderBottom = "4px solid black"
					document.getElementById("jiantou").style.borderTop = "4px solid transparent"
					document.getElementById("jiantou").style.top = "3px"
				}
			}

			/**
			 * 点击阅读条款对勾移位
			 */
			function fun1() {
				n++;
				if(n % 2 == 0) {
					document.getElementById("fxk").style.backgroundPositionX = "-24px";
					document.getElementById("btnReg").disabled = false;
				} else {
					document.getElementById("fxk").style.backgroundPositionX = "-48px";
				}
			}

			//提交表单内容校验
			document.getElementById("regFrom").onsubmit = function() {
				var phone = document.getElementById("phone");
				if(phone.value == "") {
					//设置错误信息消息的显示
					phone.parentNode.children[1].style.display = "block"
					phone.parentNode.children[3].style.display = "block"
				};
				return false;
			}
			/**
			 * 判断手机号对错
			 */
			function yzPhone() {
				var phone = document.getElementById("phone");
				var phonenum = parseInt(phone.value);
				if(phonenum && phonenum == phone.value && phone.value.length == 11) {
					phone.parentNode.children[2].style.display = "block"
					phone.parentNode.children[1].style.display = "none"
					phone.parentNode.children[3].style.display = "none"
				} else {
					//设置错误信息消息的显示
					phone.parentNode.children[1].style.display = "block"
					phone.parentNode.children[3].style.display = "block"
					phone.parentNode.children[2].style.display = "none"
				}
			}
			/*
			 * 判断密码对错
			 */
			function yzPassword() {
				var password = document.getElementById("password");
				if(password.value && (password.value.length >= 6 && password.value.length <= 20)) {
					password.parentNode.children[2].style.display = "block"
					password.parentNode.children[1].style.display = "none"
					password.parentNode.children[3].style.display = "none"
				} else {
					//设置错误信息消息的显示
					password.parentNode.children[1].style.display = "block"
					password.parentNode.children[3].style.display = "block"
					password.parentNode.children[2].style.display = "none"
				}
			}
			document.getElementById("phone").onblur = yzPhone;
			document.getElementById("password").onblur = yzPassword;
		</script>
	</body>

</html>